<template>
  <div class="events-details">
    <section class="page-back">
      <router-link to="/events">活动赛事 ></router-link>
      <router-link to="/events/sports">体育赛事 ></router-link>
      <span>{{infoDetail.name}}</span>
    </section>
    <section class="details-container">
      <div class="title-img">
        <img src="../../../assets/images/events/banner2.png" alt="标题图片" />
      </div>
      <div class="activities-poster-part">
        <!-- 封面： -->
        <section class="poster-info">
          <div class="poster-info-title">
            <h2>{{infoDetail.name}}</h2>
            <!-- 此活动进行状态,对所有人显示  -->
            <span :class="'progress'+infoDetail.show_status_int">{{infoDetail.show_status_text}}</span>
          </div>
          <div class="poster-img">
            <img
              v-if="infoDetail.picture==''"
              src="../../../assets/images/events/bg-img.png"
              alt="封面图片"
            />
            <img v-else :src="BASE_URL+infoDetail.picture" :onerror="errorImg1" alt="封面图片" />
          </div>
          <div class="status-box">
            <!-- v-if="infoDetail.online==1&&infoDetail.registration_status==1&&infoDetail.checked_quota_status==0" -->
            <el-button
              v-if="infoDetail.online==1&&infoDetail.registration_status==1&&infoDetail.role_id.indexOf(userInfo.check_role)>-1&&joinFlag==true"
              class="registration-btn"
              type="primary"
              @click="registryVisible=true"
            >立即报名</el-button>
          </div>
        </section>

        <!-- 赛事详情： -->
        <section class="details-info">
          <ul>
            <li>
              <span class="title-name">发起人：</span>
              <span>
                <img class="avatar-img" :src="BASE_URL+infoDetail.avatar_path" alt />
                <i class="creater-name">{{infoDetail.create_name}}</i>
              </span>
            </li>
            <li>
              <span class="title-name">赛事类型：</span>
              <span>{{infoDetail.level_type==1?"校级赛事":(infoDetail.level_type==2?"年级赛事":"班级赛事")}}</span>
            </li>
            <li v-if="infoDetail.level_type!=1">
              <span class="title-name">赛事范围：</span>
              <span>{{infoDetail.all_org_name}}</span>
            </li>
            <li>
              <span class="title-name">赛事对象：</span>
              <span>
                <i v-for="(item,index) of infoDetail.role_info" :key="index">{{item.name}}&nbsp;</i>
              </span>
            </li>
            <li>
              <span class="title-name">赛事时间：</span>
              <span>{{infoDetail.start_time}} 至 {{infoDetail.end_time}}</span>
            </li>
          </ul>
          <ul>
            <li>
              <span class="title-name">赛事地点：</span>
              <span>{{infoDetail.place}}</span>
            </li>
            <li v-if="infoDetail.quota!=0">
              <span class="title-name">赛事名额：</span>
              <span>
                <i class="right-area">{{infoDetail.quota}}人</i>
                <i>已有{{infoDetail.quota_used_count}}人报名</i>
              </span>
            </li>
            <li>
              <span class="title-name">赛事组织方：</span>
              <span>{{infoDetail.organizer}}</span>
            </li>
            <li>
              <span class="title-name">赛事联系人：</span>
              <span>{{infoDetail.responsibler}}</span>
            </li>
            <li>
              <span class="title-name">联系方式：</span>
              <span>{{infoDetail.telephone}}</span>
            </li>
          </ul>
        </section>
        <!-- 其他信息部分： -->
        <section>
          <div class="nav-title">
            <ul>
              <li
                :class="navActive==0?'title-item active':'title-item'"
                @click="handleTab(0)"
              >
                <span>赛事介绍</span>
              </li>
                     <li
                     v-if="infoDetail.online=='1'"
                :class="navActive==1?'title-item active':'title-item'"
                @click="handleTab(1)"
              >
                <span>赛事报名</span>
              </li>
                     <li
                :class="navActive==2?'title-item active':'title-item'"
                @click="handleTab(2)"
              >
                <span>赛事点评</span>
              </li>
                     <li
                :class="navActive==3?'title-item active':'title-item'"
                @click="handleTab(3)"
              >
                <span>赛事成绩</span>
              </li>
            </ul>
            <template v-if="navActive==0">
              <div v-if="infoDetail.profile==''" class="events-intraduction">没有详细介绍</div>
              <div v-else class="events-intraduction" v-html="infoDetail.profile"></div>
            </template>
            <template v-if="navActive==1&&infoDetail.online=='1'">
              <div class="events-registration">
                <div class="no-registration">
                  <ul class="registration-list">
                    <li
                      class="registration-item"
                      v-for="(item,index) of registrationList"
                      :key="index"
                    >
                      <div class="item-info">
                        <p
                          class="events-title"
                          v-for="(item1,index1) of item.project"
                          :key="index1"
                        >{{item1.id==item.project_id?item1.name:null}}</p>
                        <div class="base-info">
                          <img :src="BASE_URL+item.avatar_path" :onerror="errorImg" alt="头像" />
                          <div class="user-info">
                            <p class="username">{{item.user_name}}</p>
                            <p class="identity">
                              <span>{{item.role_name}}</span>
                              <span>{{item.all_org_name}}</span>
                            </p>
                          </div>
                        </div>
                        <ul>
                          <template>
                            <li
                              class="re-list"
                              v-for="(item3,index3) of item.information"
                              :key="index3"
                            >
                                <span class="re-title">{{item3.name}}：</span>
                              <span>{{item3.value}}</span>
                            </li>
                          </template>
                        </ul>
                      </div>
                      <span :class="'right-status status'+item.status">
                        <i></i>
                        <i>{{item.front_status_txt}}</i>
                      </span>
                    </li>
                  </ul>
                  <div class="pageBox">
                    <el-pagination
                      v-if="total_number2 > page_size2"
                      @current-change="change_page2"
                      :page-size="page_size2"
                      :current-page="page_index2"
                      layout="prev, pager, next"
                      :total="total_number2"
                    ></el-pagination>
                  </div>
                  <!-- 没人报名 -->
                  <div class="no-data tips5" v-if="registrationList.length==0"></div>
                  <!-- 截止报名了 -->
                  <!-- <div class="no-data tips8" v-if="infoDetail.registration_status==2"></div> -->
                </div>
              </div>
            </template>
            <template v-if="navActive==2">
              <div class="events-review">
                <div class="total-rate">
                  <span>总体评价：</span>
                  <el-rate allow-half :value="userScore"></el-rate>
                  <span v-if="0 < userScore &&userScore <= 1">很不满意，各方面都很差</span>
                  <span v-if="1 < userScore && userScore <= 2">不满意，比较差</span>
                  <span v-if="2 < userScore && userScore <= 3">一般，还需改善</span>
                  <span v-if="3 < userScore && userScore <= 4">比较满意，仍可改善</span>
                  <span v-if="4 < userScore && userScore <= 5">非常满意，无可挑剔</span>
                </div>
                <div v-if="commentFlag==true">
                  <el-input
                    class="rate-textarea"
                    type="textarea"
                    placeholder="说说这次比赛的“亮点”和“不足”吧"
                    v-model="content"
                    maxlength="140"
                    :autosize="{minRows: 6}"
                    show-word-limit
                  ></el-input>
                  <div class="review-row">
                    <div class="rate-box clear">
                      <ul>
                        <li>
                          <span>
                            <i class="rate-title">赛程合理性：</i>
                            <el-rate allow-half v-model="score1"></el-rate>
                          </span>
                          <span>
                            <i class="rate-title">赛事报名便捷性：</i>
                            <el-rate allow-half v-model="score2"></el-rate>
                          </span>
                          <span>
                            <i class="rate-title">现场组织规范性：</i>
                            <el-rate allow-half v-model="score3"></el-rate>
                          </span>
                        </li>
                        <li>
                          <span>
                            <i class="rate-title">安全保障满意度：</i>
                            <el-rate allow-half v-model="score4"></el-rate>
                          </span>
                          <span>
                            <i class="rate-title">成绩公正性及时性：</i>
                            <el-rate allow-half v-model="score5"></el-rate>
                          </span>
                        </li>
                      </ul>
                      <el-button class="review-btn fr" type="primary" @click="addComment">发表</el-button>
                    </div>
                  </div>
                </div>
                <div class="rate-statistics">
                  <div class="statistics-left">
                    <div class="people-count">
                      <p class="total-count">{{totalRate}}</p>
                      <p>
                        <el-rate allow-half :value="totalRate/2"></el-rate>
                      </p>
                      <div class="count-row">
                        <span>评价人数：{{commentData.length}}</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>满意占比：<i v-if="commentData.length>0">{{(pleasedCount/commentData.length)*100}}%</i> <i v-else>0%</i>  </span>
                      </div>
                    </div>
                  </div>
                  <div class="statistics-right clear">
                    <ul class="fr">
                      <li>
                        <span>赛程合理性：</span>
                        ............................................. {{allScore1}}
                      </li>
                      <li>
                        <span>赛事报名便捷性：</span>
                        ............................................. {{allScore2}}
                      </li>
                      <li>
                        <span>现场组织规范性：</span>
                        ............................................. {{allScore3}}
                      </li>
                      <li>
                        <span>安全保障满意度：</span>
                        ............................................. {{allScore4}}
                      </li>
                      <li>
                        <span>成绩公正性及时性：</span>
                        ............................................. {{allScore5}}
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="common-title">
                  <i class="tit-name">评论</i>
                </div>
                <div class="review-content">
                  <ul>
                    <li v-for="(item,index) of commentData" :key="index">
                      <div class="clear">
                        <img
                          class="reviewer-pic"
                          :src="BASE_URL+item.avatar_path"
                          :onerror="errorImg"
                          alt="头像"
                        />
                        <span class="reviewer-name">{{item.create_name}}</span>
                        <el-rate
                          allow-half
                          :value="(item.score1+item.score2+item.score3+item.score4+item.score5)/10"
                        ></el-rate>
                        <span class="review-time fr">{{item.create_time}}</span>
                        <span class="review-tools fr" v-if="item.create_id==userId">
                          <i class="el-icon-edit-outline" @click="editComment(item)"></i>
                          <i class="el-icon-delete" @click="delComment(item.id)"></i>
                        </span>
                      </div>
                      <p class="review-word">{{item.content}}</p>
                    </li>
                  </ul>
                  <div class="pageBox">
                    <el-pagination
                      v-if="total_number > page_size"
                      @current-change="change_page"
                      :page-size="page_size"
                      :current-page="page_index"
                      layout="prev, pager, next"
                      :total="total_number"
                    ></el-pagination>
                  </div>
                  <div class="no-data tips6" v-if="commentData.length==0"></div>
                </div>
              </div>
            </template>
            <template v-if="navActive==3">
              <div class="events-result">
                <ul>
                  <li
                    class="entry-file-list clear"
                    v-for="(item, index) in resultData"
                    :key="index"
                  >
                    <div class="competition-info fl">
                      <img
                        v-if="item.file_type==1"
                        src="../../../../public/images/format/resourceicon1.png"
                        alt="文档"
                      />
                      <img
                        v-else-if="item.file_type==2"
                        src="../../../../public/images/format/resourceicon2.png"
                        alt="日志"
                      />
                      <img
                        v-else-if="item.file_type==3"
                        src="../../../../public/images/format/resourceicon3.png"
                        alt="图片"
                      />
                      <img
                        v-else-if="item.file_type==4"
                        src="../../../../public/images/format/resourceicon4.png"
                        alt="压缩文件"
                      />
                      <img
                        v-else-if="item.file_type==5"
                        src="../../../../public/images/format/resourceicon5.png"
                        alt="音乐"
                      />
                      <img
                        v-else-if="item.file_type==6"
                        src="../../../../public/images/format/resourceicon6.png"
                        alt="视频"
                      />
                      <img
                        v-else-if="item.file_type==7"
                        src="../../../../public/images/format/resourceicon7.png"
                        alt="应用程序"
                      />
                      <img
                        v-else-if="item.file_type==8"
                        src="../../../../public/images/format/resourceicon8.png"
                        alt="其他"
                      />
                      <span class="fileName" :title="item.name+'.'+item.postfix">{{item.name}}</span>
                    </div>
                    <div class="tool-btns fr">
                      <el-button type="primary" class="downLoad-btn" @click="down(item)">下载</el-button>
                    </div>
                  </li>
                </ul>
                <div class="no-data tips7" v-if="resultData.length==0"></div>
              </div>
            </template>
          </div>
        </section>
      </div>
    </section>
    <el-dialog class="registryDialog" title="登记报名信息" :visible.sync="registryVisible" width="550px">
      <el-form ref="registrationForm" label-width="130px" label-position="left">
        <el-form-item required label="参赛项目:">
          <el-select v-model="project_id" placeholder="请选参赛项目" @change="selectProject">
            <el-option v-for="item in project" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参赛名额:">{{projectQuota}}</el-form-item>
        <el-form-item label="账号:">{{userInfo.number}}</el-form-item>
        <el-form-item label="学段年级班级:" v-if="userInfo.class">{{userInfo.class[0].org_tre_name}}</el-form-item>
        <el-form-item label="角色:">{{userInfo.check_role_name}}</el-form-item>
        <template>
          <div v-for="(item,inx) in registrationItem.info" :key="inx">
            <el-form-item :label="item.name+':'" required>
              <el-input v-model="item.value" maxlength="30"></el-input>
            </el-form-item>
          </div>
        </template>
      </el-form>
      <div class="form-footer-btns">
        <el-button @click="registryVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">报 名</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: this.$store.getters.userInfo,
      userId: this.$g.user_id,
      infoDetail: [], //当前活动的详情数据
      joinFlag:false,
      //封面图片加载不成功时的占位符
      errorImg1:
        'this.src="' +
        require("../../../assets/images/events/bg-img.png") +
        '"',
      //用户头像加载不成功时的占位符
      errorImg:
        'this.src="' +
        require("../../../../public/images/user_preview-1.png") +
        '"',
      navActive: 0, //tab选中

      registryVisible: false,
      project: [], //项目数据
      project_id: "", //选中报名的项目id
      projectQuota: 0, //选中报名的项目名额
      registration_information: [], //自定义报名的信息
      registrationItem: {}, //选中项目自定义报名的信息
      registrationList: [], //报名列表
      // 报名列表分页：
      page_index2: 1,
      page_size2: 5,
      total_number2: 0,

      totalRate: 0, //总平均分
      totalComment: "", //总评价
      content: "", //评论
      //5项目的评分
      score1: 0,
      score2: 0,
      score3: 0,
      score4: 0,
      score5: 0,
      //所有人5项目的总评分
      allScore1: 0,
      allScore2: 0,
      allScore3: 0,
      allScore4: 0,
      allScore5: 0,
      pleasedCount: 0, //7-8分满意人数

      commentFlag: true, //评论输入框部分
      commentData: [], //评论列表数据
      commentMethod: "post", //评论的发送数据的方法、新增是post/编辑是put,一个赛事只能评论一次
      editId: "", //编辑的评论id
      // 评论列表分页：
      page_index: 1,
      page_size: 5,
      total_number: 0,

      resultData: [] //赛事成绩数据
    };
  },
  created() {
    this.getDetail();
    this.getRegistration();
    this.getResult();
  },
  mounted() {
    this.getComment();
  },
  watch: {

  },
  computed: {
    userScore(){
        let ave=(this.score1 +this.score2 +this.score3 +this.score4 +this.score5)/5;
       return ave ;
    }

  },
  methods: {
    /**
     * 获取赛事详情
     */
    getDetail() {
      let success = res => {
        // 赛事详情数据
        // console.log(res.data);
        this.infoDetail = res.data;
        this.checkjoinRole(res.data.org_id);//判断用户是否在活动允许的报名范围内（如学校、年级、班级这些条件是否符合）
        // 赛事项目数据
        this.project = res.data.project;
        // 报名弹窗选择框默认选中第一个赛事
        this.project_id = res.data.project[0].id;
        // 报名自定义部分的数据
        this.registration_information = res.data.registration_information;
        // 如果创建赛事的时候，报名自定义信息没设置，那会返回一个项空的对象，name是空
        if(res.data.registration_information[0].info[0].name){
            this.registrationItem=res.data.registration_information[0];
        }
       
        this.projectQuota = res.data.project[0].quota;
      };
      const params = {
        id: this.$route.query.id
      };
      this.$ajax.get("api/competition/match", {
        params,
        func: { success: success }
      });
    },
        // 判断用户是否在某组织架构下
        checkjoinRole(orgId){
        let success = res => {
         this.joinFlag=res.data=='yes'?true:false;
      };
      let fail = res => {
      };
      this.$ajax({
        url: "api/org/get_user_in_org",
        method: "get",
        params: {
          org_id: orgId,
          user_id: this.userId
        },
        func: {
          success: success,
          fail: fail
        }
      });
      },
    // 其他信息tab切换
    handleTab(index) {
      this.navActive = index;
    },
    /**
     * 选择赛事select框
     */
    selectProject(id) {
      this.project_id = id;
          // select框选择不同项目，报名填写内容的自定义部分也切换对应的
        this.registration_information.forEach((val, inx) => {
          if (id == val.id) {
            this.registrationItem = val;
          }
        });
        this.project.forEach((val, inx) => {
          if (id == val.id) {
            this.projectQuota = val.quota;
          }
        });
    },
    /**
     * 获取报名信息
     */
    getRegistration() {
      let success = res => {
        this.registrationList = res.data.data;
        this.total_number2 = res.data.data_sum;
      };
      const params = {
        competition_id: this.$route.query.id,
        page_index: this.page_index2,
        page_size: this.page_size2
      };
      this.$ajax.get("api/competition/match_user", {
        params,
        func: { success: success }
      });
    },
        // 评论列表分页：
    change_page2(val) {
      this.page_index2 = val;
      this.getRegistration();
    },
    /**
     * 报名提交
     */
    submit() {
      if (this.project_id == "") {
        this.$message.error("请选择一个项目");
        return;
      }
    // 判断一下是否有自定义报名信息
    if(this.registrationItem.info){
        let flag = this.registrationItem.info.some((item, inx) => {
        return item.value.replace(/\s/g, "") == "";
      });
      if (flag) {
        this.$message.error("请把项目报名信息填写完整~");
      } else {
        this.registrate();
      }
    }else{
        this.registrate();
    }

    },
    /**
     * 提交报名信息
     */
    registrate() {
      let success = res => {
        this.$message.success(res.msg);
        this.getRegistration();
        this.getDetail();
        this.registryVisible = false;
      };
      let fail = res => {
        this.$message.error(res.msg);
        this.registryVisible = false;
      };
      this.$ajax({
        url: "api/competition/match_user",
        method: "post",
        data: {
          id: this.$route.query.id,
          user_id: this.userId,
          project_id: this.project_id,
          information: this.registrationItem.info
        },
        func: {
          success: success,
          fail: fail
        }
      });
    },
    /**
     * 获取评论列表
     */
    getComment() {
      let success = res => {
        this.commentData = res.data.data;
        this.total_number = res.data.data_sum;

        let flagData =res.data.data.filter(item=>{
            return item.create_id==this.userId;
        })
        if(is_empty(flagData)){
            this.commentFlag = true;
        }else{
            this.commentFlag = false;
            this.score1=flagData[0].score1/2;
            this.score2=flagData[0].score2/2;
            this.score3=flagData[0].score3/2;
            this.score4=flagData[0].score4/2;
            this.score5=flagData[0].score5/2;
        }
        let len = res.data.data.length;
        this.pleasedCount = 0;
        if (len > 0) {
          let totalScore = 0;
          let allScore1 = 0;
          let allScore2 = 0;
          let allScore3 = 0;
          let allScore4 = 0;
          let allScore5 = 0;
          res.data.data.forEach((item, index) => {
       
            //单人的评分
            let itemScore = 0;
            itemScore =
              item.score1 +
              item.score2 +
              item.score3 +
              item.score4 +
              item.score5;
            totalScore += itemScore;
            allScore1 += item.score1;
            allScore2 += item.score2;
            allScore3 += item.score3;
            allScore4 += item.score4;
            allScore5 += item.score5;
            // 判断一个用户的评分分数是否7分以上
            if (itemScore / 5 >= 7) {
              this.pleasedCount++;
            }
          });
          this.totalRate = totalScore / (len * 5);
          this.allScore1 = allScore1 / len;
          this.allScore2 = allScore2 / len;
          this.allScore3 = allScore3 / len;
          this.allScore4 = allScore4 / len;
          this.allScore5 = allScore5 / len;
        } else {
          this.commentFlag = true;
        }
      };
      const params = {
        competition_id: this.$route.query.id,
        page_index: this.page_index,
        page_size: this.page_size
      };
      this.$ajax.get("api/competition/activity_comment", {
        params,
        func: { success: success }
      });
    },
    /**
     * 添加评论和评分/编辑
     */
    addComment() {
      let data = {};
      if (this.commentMethod == "post") {
        data = {
          id: this.$route.query.id,
          content: this.content,
          user_id: this.userId,
          score1: this.score1 * 2,
          score2: this.score2 * 2,
          score3: this.score3 * 2,
          score4: this.score4 * 2,
          score5: this.score5 * 2
        };
      } else {
        data = {
          id: this.editId,
          content: this.content,
          score1: this.score1 * 2,
          score2: this.score2 * 2,
          score3: this.score3 * 2,
          score4: this.score4 * 2,
          score5: this.score5 * 2
        };
      }

      if (this.content == "" || this.content == " ") {
        this.$message.warning("请输入评论~");
        return;
      }
      if (
        this.score1 == 0 ||
        this.score2 == 0 ||
        this.score3 == 0 ||
        this.score4 == 0 ||
        this.score5 == 0
      ) {
        this.$message.warning("请评分~");
        return;
      }
      let success = res => {
        this.commentFlag = false;
        this.$message.success(res.msg);
        this.getComment();
      };
      let fail = res => {
        this.$message.error(res.msg);
      };

      this.$ajax({
        url: "api/competition/activity_comment",
        method: this.commentMethod,
        data,
        func: {
          success: success,
          fail: fail
        }
      });
    },
    // 评论列表分页：
    change_page(val) {
      this.page_index = val;
      this.getComment();
    },
    //编辑自己的评论
    editComment(item) {
      this.commentFlag = !this.commentFlag;
      this.editId = item.id;
      this.content = item.content;
      this.score1 = item.score1 / 2;
      this.score2 = item.score2 / 2;
      this.score3 = item.score3 / 2;
      this.score4 = item.score4 / 2;
      this.score5 = item.score5 / 2;
    },

    //删除自己的评论
    delComment(id) {
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "confirm-them"
      })
        .then(() => {
          this.sureDel(id);
        })
        .catch(() => {});
    },
    // 确定删除
    sureDel(id) {
      let success = res => {
        this.content = "";
        this.score1 = 0;
        this.score2 = 0;
        this.score3 = 0;
        this.score4 = 0;
        this.score5 = 0;
        this.commentFlag = true;
        this.userScore = 0;
        this.getComment();
        this.$message.success("成功删除评论");
      };
      this.$ajax({
        url: "api/competition/activity_comment",
        method: "delete",
        params: {
          id: id
        },
        func: {
          success: success
        }
      });
    },

    /**
     * 获取赛事成绩
     */
    getResult() {
      let success = res => {
        this.resultData = res.data;
      };
      const params = {
        competition_id: this.$route.query.id
      };
      this.$ajax.get("api/competition/match_file", {
        params,
        func: { success: success }
      });
    },
    /**
     * 下载成绩文件
     */
    down(obj) {
      var form = document.createElement("form");
      var type = 1;
      form.action = this.BASE_URL + "/index/resource/match_file_download";
      form.method = "post";
      form.style.display = "none";
      var opt_id = document.createElement("textarea");
      opt_id.name = "id";
      opt_id.value = obj.id;
      form.appendChild(opt_id);
      var opt_type = document.createElement("textarea");
      opt_type.name = "type";
      opt_type.value = type;
      form.appendChild(opt_type);
      document.body.appendChild(form);
      form.submit();
      document.body.removeChild(form);
    }
  }
};
</script>
<style lang="scss">
%ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-back {
  font-size: 14px;
  padding: 5px 0 25px;
  a:nth-child(1) {
    color: #333;
  }
  span {
    color: #3f3f3f;
  }
}
.events-details {
  .details-container {
    background-color: #fff;
    .title-img {
      height: 120px;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .activities-poster-part {
      padding: 64px 100px;
      box-sizing: border-box;

      .poster-info {
        box-sizing: border-box;
        padding-right: 100px;
        position: relative;
        .poster-img {
          padding: 40px 0;
        }
      }
      .poster-info-title {
        h2 {
          display: inline-block;
          max-width: 80%;
          font-size: 24px;
          line-height: 24px;
          @extend %ellipsis;
          vertical-align: middle;
        }
        span {
          display: inline-block;
          width: 80px;
          height: 28px;
          text-align: center;
          line-height: 28px;
          border-radius: 14px;
          vertical-align: middle;
          margin-left: 20px;
        }
        .progress1,
        .progress2,
        .progress3,
        .progress4,
        .progress5,
        .progress6 {
          color: #fff;
        }
        .progress1 {
          background-color: #dc972e;
        }
        .progress2 {
          background-color: #3cc56d;
        }
        .progress3 {
          background-color: #cb3c6b;
        }
        .progress4 {
          background-color: #599fde;
        }
        .progress5 {
          background-color: #599fde;
        }
        .progress6sssss {
          background-color: #999;
        }
      }
      .status-box {
        position: absolute;
        right: 0;
        top: 0;
        .registration-btn {
          width: 160px;
          height: 48px;
          padding: 0;
        }
      }
    }

    .reject-reson {
      height: 36px;
      line-height: 36px;
      background-color: #fff8f0;
      font-size: 14px;
      color: #a94545;
      padding-left: 20px;
    }
  }

  .details-info {
    background-color: #f0f8ff;
    ul {
      padding: 18px;
      box-sizing: border-box;
    }
    font-size: 14px;
    i {
      font-style: normal;
    }
    li {
      padding: 10px 0;
      span:nth-child(2) {
        display: inline-block;
        width: calc(100% - 130px);
        @extend %ellipsis;
      }
    }
    .title-name {
      display: inline-block;
      width: 130px;
      font-size: 14px;
      color: #666;
      vertical-align: top;
    }
    .poster-img {
      display: inline-block;
      width: 390px;
      height: 180px;
    }
    .avatar-img {
      display: inline-block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #ccc;
      margin-right: 10px;
    }
    .avatar-img,
    .creater-name {
      vertical-align: middle;
    }
    .right-area {
      margin-right: 20px;
    }
    ul {
      display: inline-block;
      width: 50%;
    }
  }
  .nav-title {
    padding: 40px 0 30px;
    > ul {
      padding-left: 15px;
    }
    .title-item {
      display: inline-block;
      width: 154px;
      height: 48px;
      text-align: center;
      line-height: 48px;
      font-size: 14px;
      color: #666;
      border: 1px solid #ddd;
      transform: skew(-20deg);
      background-color: #fff;
      cursor: pointer;
    }
    .active {
      background-color: #348efc;
      color: #fff;
      border: 1px solid transparent;
    }
  }
  .registry-title {
    img,
    i,
    .el-button {
      vertical-align: middle;
    }
    .check-btn {
      margin-right: 20px;
    }
    .el-button {
      padding: 4px 6px;
      margin: 6px 20px 0;
    }
    .el-button--text a {
      color: #409eff;
    }
  }
  .registry-part {
    // padding: 38px 0;
    li {
      display: inline-block;
      width: 60px;
      margin: 0 20px 30px;
      text-align: center;
      .comers-pic {
        border-radius: 50%;
      }
      .comers-name {
        display: block;
        font-size: 14px;
        color: #333;
        padding-top: 8px;
      }
    }
    .check-more-row {
      text-align: center;
      .check-more-btn:hover {
        .el-icon-arrow-up {
          transform: rotate(180deg);
          -webkit-transform: rotate(180deg);
          -moz-transform: rotate(180deg);
          -o-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
        }
      }
      .el-icon-arrow-up {
        transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
      }
    }
  }

  .review-title {
    .write-btn {
      padding: 8px 0;
      margin-right: 20px;
      i {
        font-size: 20px;
      }
    }
  }
  .registryDialog {
    .form-footer-btns {
      text-align: center;
      .el-button {
        padding: 0;
        width: 68px;
        height: 30px;
      }
    }
  }
  .tips3 {
    height: 400px;
    background: url("../../../assets/images/events/pleaceholder (3).png")
      no-repeat center #fff;
  }
  .tips5 {
    height: 400px;
    background: url("../../../assets/images/events/pleaceholder (5).png")
      no-repeat center #fff;
  }
  .tips6 {
    height: 400px;
    background: url("../../../assets/images/events/pleaceholder (6).png")
      no-repeat center #fff;
  }
  .tips8 {
    height: 400px;
    background: url("../../../assets/images/events/pleaceholder (8).png")
      no-repeat center #fff;
  }
  .events-intraduction {
    padding: 40px 0;
    min-height: 400px;
        word-break: break-all;
    line-height: 18px;
  }
  .events-registration {
    padding-top: 40px;
    .registration-list {
      .registration-item {
        box-sizing: border-box;
        padding: 18px 150px 18px 40px;
        border: 1px solid #efefef;
        border-radius: 8px;
        position: relative;
        margin-bottom: 30px;
        .item-info {
          text-align: left;
          .events-title {
            font-size: 18px;
            font-weight: 600;
            line-height: 20px;
          }
        }
        .base-info {
          margin: 20px 0;
          padding-left: 60px;
          position: relative;
          img {
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            position: absolute;
            left: 0;
          }
          .username {
            font-size: 14px;
            line-height: 20px;
          }
          .identity {
            line-height: 20px;
            font-size: 12px;
            color: #999;
            span:nth-child(1) {
              margin-right: 30px;
            }
          }
        }
        .re-list {
          font-size: 14px;
          line-height: 20px;
        }
        .re-title {
          display: inline-block;
          width: 200px;
          color: #666;
          vertical-align: top;
        }
        .right-status {
          position: absolute;
          right: 18px;
          top: 18px;
          i:nth-child(1) {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 10px;
          }
          i {
            vertical-align: middle;
          }
        }
        .status1 {
          i:nth-child(1) {
            background: url("../../../assets/images/events/right-icon.png")
              no-repeat;
          }
          i {
            color: #348efc;
          }
        }
        .status0 {
          i:nth-child(1) {
            background: url("../../../assets/images/events/more-icon.png")
              no-repeat;
          }
          i {
            color: #dc972e;
          }
        }
        .status2 {
          i:nth-child(1) {
            background: url("../../../assets/images/events/error-icon.png")
              no-repeat;
          }
          i {
            color: #cb3c6b;
          }
        }
      }
    }
    .no-registration {
      text-align: center;
    }
  }

  .events-review {
    padding: 40px 0;
    .total-rate {
      span {
        font-size: 14px;
      }
      span,
      .el-rate {
        vertical-align: middle;
      }
      .el-rate {
        display: inline-block;
        margin: 0 38px 0 22px;
      }
      span:nth-child(1) {
        color: #333;
      }
    }
    .rate-textarea {
      margin: 28px 0;
    }
    .review-row {
      padding-bottom: 44px;
      border-bottom: 1px solid #efefef;
    }
    .rate-box {
      li {
        margin-bottom: 25px;
        > span:nth-child(2) {
          margin: 0 90px;
        }
        .rate-title {
          display: inline-block;
          width: 128px;
          font-size: 14px;
          line-height: 20px;
          color: #333;
          margin-right: 20px;
        }
        .el-rate {
          display: inline-block;
        }
        .rate-title,
        .el-rate {
          vertical-align: middle;
        }
      }
      .review-btn {
        padding: 0;
        width: 80px;
        height: 36px;
      }
    }
    .rate-statistics {
      padding: 40px 0;
      .statistics-left,
      .statistics-right {
        box-sizing: border-box;
        width: 50%;
        display: inline-block;
        vertical-align: middle;
      }
      .statistics-left {
        border-right: 1px dotted #ddd;
        .people-count {
          width: 420px;
          height: 250px;
          background-color: #fffef3;
          text-align: center;
          overflow: hidden;
          .total-count {
            font-size: 60px;
            line-height: 78px;
            color: #dda43f;
            margin: 20px 0;
          }
          .count-row {
            margin-top: 40px;
            font-size: 14px;
            .el-divider {
              margin: 0 20px;
            }
          }
        }
      }
      .statistics-right {
        height: 250px;
        ul {
          width: 420px;
          height: 100%;
          padding-top: 20px;
        }
        li {
          font-size: 14px;
          color: #333;
          line-height: 20px;
          margin: 10px 0;
          span {
            display: inline-block;
            width: 128px;
          }
        }
      }
    }
    .review-content {
      li {
        padding: 20px 0 25px;
        border-bottom: 1px solid #efefef;
        &:hover {
          .review-tools {
            display: block;
          }
        }
        .reviewer-pic {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        .reviewer-name {
          font-size: 14px;
          margin: 0 12px;
        }
        .el-rate {
          display: inline-block;
        }
        .review-tools {
          display: none;
          i {
            color: #348efc;
            margin-right: 20px;
            font-size: 18px;
            cursor: pointer;
          }
        }
        .review-time {
          font-size: 12px;
          color: #999;
        }
        .review-word {
          padding-left: 52px;
        }
      }
      .tips6 {
        height: 400px;
        background: url("../../../assets/images/events/pleaceholder (6).png")
          no-repeat center #fff;
      }
    }
  }
  .common-title {
    height: 36px;
    line-height: 36px;
    background-color: #f0f8ff;
    font-size: 14px;
    padding-left: 20px;
  }
  .events-result {
    padding: 20px 0 40px;
    li {
      padding: 20px 0;
      border-bottom: 1px solid #efefef;
      .competition-info {
        .fileName {
          font-size: 16px;
        }
        img,
        span {
          vertical-align: middle;
          padding: 0 10px;
        }
      }
      .tool-btns {
        .el-button {
          padding: 0;
          width: 80px;
          height: 36px;
        }
      }
    }
    .tips7 {
      height: 400px;
      background: url("../../../assets/images/events/pleaceholder (7).png")
        no-repeat center #fff;
    }
  }
}
</style>